<template>
  <div style="padding: 10px" class="data-import-area">
    <customSpace fullWidth >
      <template #content>
        <customButton size="medium" @click="downLoad"  title="下载模板" theme="primary"/>
        <customUpload
          :data="{ fileRefId: 'dataImport', fileRefTable: 'dataImport', fileSavePath: 'dataImport'}"
          :max="1"
          onlyButton
          :action="config.importPath"
          @success="success"
          @error="error"
          class="custom-upload"
          ref="customUpload"
          v-if="isRenderUpload"
        />
      </template>
    </customSpace>
    <div   class="box-title">操作说明</div>
    <div v-html="config.help" style="font-size: 11px; padding: 5px 0px 5px 10px;">
    </div>

    <div   class="box-title">操作结果</div>
    <div  style="font-size: 11px;"  v-show="result.fileNameDisplay">
      <span style="padding-right: 10px; font-size: 12px; font-weight: bold">{{result.fileNameDisplay}}</span>
      <div>
        <span style="font-size: 12px;color: #409eff;">
        总数量:{{result.totalCount}}
      </span>
        <span style="font-size: 12px;color: green;padding: 0px 10px">
        成功:{{result.successCount}}
      </span>
        <span style="font-size: 12px;color: red;">
        失败:{{result.failCount}}
      </span>
      </div>
      <div style="font-size: 12px;color: magenta;"   v-show="result.msg"
           class="box-result"
        v-html="result.msg"
      >
      </div>
      <h3 v-show="result.failCount > 0" style="font-weight: bold;color: red;">失败信息如下</h3>
      <div  v-show="result.failCount > 0" style="max-height: 200px; overflow: scroll;">
        <div  v-for="(item,index) in result.messages" :key="index">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customUpload from '@/components/custom/form/customUpload.vue'
export default {
  help: '系统数据导入-导入区域',
  data() {
    return {
      result: {
        fileNameDisplay:null,
        totalCount: 0,
        successCount: 0,
        failCount: 0,
        msg: null,
      },
      isRenderUpload: true,
    }
  },
  methods: {
    // 清空
    clear(){
      this.result = {
        fileNameDisplay:null,
        totalCount: 0,
        successCount: 0,
        failCount: 0,
        msg: null,
      }
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
    },
    downLoad(){
      let token = global.utils.getToken()
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = global.utils.getBaseUrlFull() + this.config.downloadPath + `?sheetName=${this.config.sheetName}&X-Token=${token}`
      document.body.appendChild(link)
      link.click()
    },
    success(data){
      this.result = data
      this.result.fileNameDisplay = this.$refs.customUpload.inst().displayFiles[0].name
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
      this.$emit('success')
    },
    error(resp){
      this.result = {
        fileNameDisplay:null,
        totalCount: 0,
        successCount: 0,
        failCount: 0,
      }
      this.result.fileNameDisplay = this.$refs.customUpload.inst().displayFiles[0].name
      if (resp && resp.msg) {
        this.result.msg = resp.msg
      }
      this.isRenderUpload = false
      setTimeout(() => {
        this.isRenderUpload = true
      }, 500)
    }
  },
  created() {
  },
  props: {
    /**
     * @Description：配置
     */
    config: {
      type: Object,
      default: () => { }
    }
  },
  components: { customUpload },
  computed: {
  },
}
</script>


<style lang="scss" scoped>
.box-result{
  word-break: break-all;
}
</style>
